import React,{useState,useEffect} from 'react';  
import {Table ,Modal , Input,message,Button} from 'antd'
import axios from 'axios'
  
export default function User(){
    const [dataSource,setDataSource]=useState([])
    const [messageApi, contextHolder] = message.useMessage();
    const [open,setOpen]=useState(false)
    const [recordId,setRecordId]=useState(0);
    const [star,setStar]=useState('')
    const [suggest,setSuggest]=useState('')
    const [filter, setFilter] = useState('');
    useEffect(()=>{
        fetchData();  
    },[filter])
    const fetchData = async () => {  
        try {  
            let res=await axios.get('http://localhost:5000/star/select',{
                headers:{
                    'token':sessionStorage.getItem('token'),
                    'Content-Type':'application/json;charset=UTF-8'
                }
            })
            var arr=[];
            setDataSource(res.data.data)
        } catch (error) {  
            console.error('Error fetching data:', error);  
        }  
    };
    const hideModal = () => {
        setOpen(false);
    };
    const confirmModal=()=>{
        let obj={
            star:star,
            suggest:suggest
        }
        if(recordId!==0){
            alert(11)
            obj.id=recordId
            axios({
                method:"post",
                url:'http://localhost:5000/star/upd',
                data:obj,
                headers:{
                    'token':sessionStorage.getItem('token'),
                    'Content-Type':'application/json;charset=UTF-8'
                }
            }).then(res=>{
                if(res.data.code===200){
                    messageApi.open({
                        type: 'success',
                        content: '保存成功！',
                    });
                    setOpen(false);
                    setRecordId(0)
                    setStar('')
                    setSuggest('')
                    fetchData();
                }
            })
        }else{
            axios({
                method:"post",
                url:'http://localhost:5000/star/add',
                data:obj,
                headers:{
                    'token':sessionStorage.getItem('token'),
                    'Content-Type':'application/json;charset=UTF-8'
                }
            }).then(res=>{
                if(res.data.code===200){
                    messageApi.open({
                        type: 'success',
                        content: '保存成功！',
                    });
                    setOpen(false);
                    setStar('')
                    setSuggest('')
                    fetchData();
                    
                }
            })
        }
    }
    const addStar=()=>{
        setStar('')
        setSuggest('')
        setOpen(true);
    }
    const editClick=(record)=>{
        setOpen(true);
        setRecordId(record.id)
        setStar(record.star)
        setSuggest(record.suggest)
    }
    const delClick=(record)=>{
        axios({
            method:"post",
            url:'http://localhost:5000/star/del',
            data:{id:record.id},
            headers:{
                'token':sessionStorage.getItem('token'),
                'Content-Type':'application/json;charset=UTF-8'
            }
        }).then(res=>{
            if(res.data.code===200){
                messageApi.open({
                    type: 'success',
                    content: '删除成功！',
                });
                fetchData();
            }
        })
    }
    const changeStarInput=(e)=>{
        setStar(e.target.value)
    }
    const changeSuggestInput=(e)=>{
        setSuggest(e.target.value)
    } 
    const columns = [
        {
            title: '明星',
            dataIndex: 'star',
            key: 'star',
        },
        {
            title: '介绍',
            dataIndex: 'suggest',
            key: 'suggest',
        },
        {
            title: '操作',
            key: 'action',
            render: (_,record) => (
                <div>
                    <a onClick={()=>editClick(record)}>编辑</a>
                    <a onClick={()=>delClick(record)} style={{marginLeft:20}}>删除</a>
                </div>
            ),
        },
    ]
    return(
        <div>
            {contextHolder}
            <Button type="primary" htmlType="submit" onClick={addStar}>
                添加
            </Button>
            <Table style={{marginTop:10}} dataSource={dataSource} pagination={false} columns={columns} />
            <Modal
                title="编辑"
                open={open}
                onOk={confirmModal}
                onCancel={hideModal}
                okText="确认"
                cancelText="取消"
            >
                  <div>
                      <div style={{marginTop:10}}>
                        <span>明星：</span>
                        <Input value={star} onChange={changeStarInput} style={{width:300}}/>
                      </div>
                      <div style={{marginTop:10}}>
                        <span>介绍：</span>
                        <Input value={suggest} onChange={changeSuggestInput} style={{width:300}}/>
                      </div>
                  </div>
            </Modal>
        </div>
    )
}